<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为商城</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="CSS/style.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
    <!--顶部  -->
    <header>
        <div class="header">
            <!-- 顶部黑色部分 -->
            <div class="header-top">
                <!-- 左侧部分 -->
                <div class="ht-left">
                    <a href="index.html">首页</a>
                    <a href="#">消费者业务网站</a>
                    <a href="#">优购码</a>
                    <a href="#">企业商用</a>
                    <a href="#">Select Region</a>
                    <a href="#">更多精彩</a>
                
                </div>
                <!-- 右侧部分 -->
                <div class="ht-right">
                    <a href="login.html" target="_blank">请登录</a>
                    <a href="logon.html" target="_blank">注册</a>
                    <a href="#">我的订单</a>
                    <a href="#">联系客服</a>
                    <a href="#">网站导航</a>
                    <a href="#">手机版</a>
                    <a href="#">购物车</a>
                </div>
            </div>
        </div>
    </header>

    <!-- 下面菜单栏 -->   <!-- 需要单独拎出来 -->
    <div class="header-menu">
        <div class="logo">
            <img src="img/logo_app.svg" alt="">
        </div>
        <div class="header-menu-list">
            <a href="#">华为</a>
            <a href="#">鸿蒙智行</a>
            <a href="#">华为智选</a>
            <a href="#">生态周边</a>
        </div>
        
        <!-- 搜索框 -->
        <div class="searchBar">
            <div class="icon">
                <i class="iconfont icon-sousuokuang-sousuo"></i>
            </div>
            <div class="textInput">
                <input type="text" placeholder="搜索商品">
                <input type="submit" value="go" id="go">
                <div class="clear"></div>
            </div>
        </div>


        <!-- 
        <a href="javascript:;" class="search">
            <i class="iconfont icon-sousuokuang-sousuo"></i>
        </a> 
        -->
    </div>

    <main>
        <!-- 轮播图 -->
        <div class="banner">
            <div class="swiper">
                <div class="swiper mySwiper akiswiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="img/banner1.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/banner2.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/banner3.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/banner4.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/banner5.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/banner6.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/banner7.webp" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="img/banner8.webp" alt="">
                        </div>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要滚动条 -->
                <div class="swiper-scrollbar"></div>
            </div>

            <!-- 左侧引导栏 -->
            <div class="banner-nav">
                <ul class="fir-cate">
                    <!-- 第一个列表 -->
                    <li>
                        <a href="#">
                            <span>手机</span>
                            <img  class="banner-nav-right"  src="img/right.png" alt="" >
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/Mate 系列.webp" alt="">
                                        <div class="title">Mate 系列</div>
                                    </a>
                                <li>
                                    <a href="#">
                                        <img src="img/Mate 系列.webp" alt="">
                                        <div class="title">Mate 系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/Mate 系列.webp" alt="">
                                        <div class="title">Mate 系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/Mate 系列.webp" alt="">
                                        <div class="title">Mate 系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/Mate 系列.webp" alt="">
                                        <div class="title">Mate 系列</div>
                                    </a>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/Mate 系列.webp" alt="">
                                        <div class="title">Mate 系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/Mate 系列.webp" alt="">
                                        <div class="title">Mate 系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/Mate 系列.webp" alt="">
                                        <div class="title">Mate 系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/Mate 系列.webp" alt="">
                                        <div class="title">Mate 系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/Mate 系列.webp" alt="">
                                        <div class="title">Mate 系列</div>
                                    </a>
                                </li>

                            </ul>

                        </div>
                    </li>

                    <!-- 第二个列表 -->
                    <li>
                        <a href="#">
                            <span>穿戴</span>
                            <img class="banner-nav-right"  src="img/right.png" alt="">
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/WATCH 系列.webp" alt="">
                                        <div class="title">WATCH 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/WATCH 系列.webp" alt="">
                                        <div class="title">WATCH 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/WATCH 系列.webp" alt="">
                                        <div class="title">WATCH 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/WATCH 系列.webp" alt="">
                                        <div class="title">WATCH 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/WATCH 系列.webp" alt="">
                                        <div class="title">WATCH 系列</div>
                                    </a>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/WATCH 系列.webp" alt="">
                                        <div class="title">WATCH 系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/WATCH 系列.webp" alt="">
                                        <div class="title">WATCH 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/WATCH 系列.webp" alt="">
                                        <div class="title">WATCH 系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/WATCH 系列.webp" alt="">
                                        <div class="title">WATCH 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/WATCH 系列.webp" alt="">
                                        <div class="title">WATCH 系列</div>
                                    </a>
                                </li>
                            </ul>
                                
                            
                        </div>
                    </li>

                    <!-- 第三个列表 -->
                    <li>
                        <a href="#">
                            <span>平板</span>
                            <img  class="banner-nav-right" src="img/right.png" alt="">
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>
                            </ul>
                    </li>

                    <!-- 第四个列表 -->
                    <li>
                        <a href="#">
                            <span>电脑</span>
                            <img  class="banner-nav-right" src="img/right.png" alt="">
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <img src="img/MatePad Pro 系列.webp" alt="">
                                        <div class="title">MatePad 系列</div>
                                    </a>
                                </li>
                            </ul>
                    </li>

                    <li><!-- 第五个列表 -->
                        <a href="#">
                            <span>耳机音箱</span>
                            <img  class="banner-nav-right" src="img/right.png" alt="">
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/FreeBuds Pro系列.webp" alt="">
                                        <div class="title">FreeBuds系列</div>
                                    </a>
                                <li>
                                    <a href="#">
                                        <img src="img/FreeBuds Pro系列.webp" alt="">
                                        <div class="title">FreeBuds系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/FreeBuds Pro系列.webp" alt="">
                                        <div class="title">FreeBuds系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/FreeBuds Pro系列.webp" alt="">
                                        <div class="title">FreeBuds系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/FreeBuds Pro系列.webp" alt="">
                                        <div class="title">FreeBuds系列</div>
                                    </a>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/FreeBuds Pro系列.webp" alt="">
                                        <div class="title">FreeBuds系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/FreeBuds Pro系列.webp" alt="">
                                        <div class="title">FreeBuds系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/FreeBuds Pro系列.webp" alt="">
                                        <div class="title">FreeBuds系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/FreeBuds Pro系列.webp" alt="">
                                        <div class="title">FreeBuds系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/FreeBuds Pro系列.webp" alt="">
                                        <div class="title">FreeBuds系列</div>
                                    </a>
                                </li>

                            </ul>

                        </div>
                    </li>

                    <!-- 第六个列表 -->
                    <li>
                        <a href="#">
                            <span>智慧屏</span>
                            <img class="banner-nav-right"  src="img/right.png" alt="">
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/智慧屏V系列.webp" alt="">
                                        <div class="title">智慧屏V系列</div>
                                    </a>
                                <li>
                                    <a href="#">
                                        <img src="img/智慧屏V系列.webp" alt="">
                                        <div class="title">智慧屏V系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智慧屏V系列.webp" alt="">
                                        <div class="title">智慧屏V系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智慧屏V系列.webp" alt="">
                                        <div class="title">智慧屏V系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智慧屏V系列.webp" alt="">
                                        <div class="title">智慧屏V系列</div>
                                    </a>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/智慧屏V系列.webp" alt="">
                                        <div class="title">智慧屏V系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智慧屏V系列.webp" alt="">
                                        <div class="title">智慧屏V系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智慧屏V系列.webp" alt="">
                                        <div class="title">智慧屏V系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智慧屏V系列.webp" alt="">
                                        <div class="title">智慧屏V系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智慧屏V系列.webp" alt="">
                                        <div class="title">智慧屏V系列</div>
                                    </a>
                                </li>

                            </ul>

                        </div>
                    </li>

                    <!-- 第七个列表 -->
                    <li>
                        <a href="#">
                            <span>智能家居</span>
                            <img class="banner-nav-right"  src="img/right.png" alt="">
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/智能门锁.webp" alt="">
                                        <div class="title">智能门锁</div>
                                    </a>
                                <li>
                                    <a href="#">
                                        <img src="img/智能门锁.webp" alt="">
                                        <div class="title">智能门锁</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智能门锁.webp" alt="">
                                        <div class="title">智能门锁</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智能门锁.webp" alt="">
                                        <div class="title">智能门锁</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智能门锁.webp" alt="">
                                        <div class="title">智能门锁</div>
                                    </a>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/智能门锁.webp" alt="">
                                        <div class="title">智能门锁</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智能门锁.webp" alt="">
                                        <div class="title">智能门锁</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智能门锁.webp" alt="">
                                        <div class="title">智能门锁</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智能门锁.webp" alt="">
                                        <div class="title">智能门锁</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/智能门锁.webp" alt="">
                                        <div class="title">智能门锁</div>
                                    </a>
                                </li>

                            </ul>

                        </div>
                    </li>

                    <!-- 第八个列表 -->
                    <li>
                        <a href="#">
                            <span>鸿蒙智行</span>
                            <img class="banner-nav-right" src="img/right.png" alt="">
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/享界S9系列.webp" alt="">
                                        <div class="title">享界S9系列</div>
                                    </a>
                                <li>
                                    <a href="#">
                                        <img src="img/享界S9系列.webp" alt="">
                                        <div class="title">享界S9系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/享界S9系列.webp" alt="">
                                        <div class="title">享界S9系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/享界S9系列.webp" alt="">
                                        <div class="title">享界S9系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/享界S9系列.webp" alt="">
                                        <div class="title">享界S9系列</div>
                                    </a>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/享界S9系列.webp" alt="">
                                        <div class="title">享界S9系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/享界S9系列.webp" alt="">
                                        <div class="title">享界S9系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/享界S9系列.webp" alt="">
                                        <div class="title">享界S9系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/享界S9系列.webp" alt="">
                                        <div class="title">享界S9系列</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/享界S9系列.webp" alt="">
                                        <div class="title">享界S9系列</div>
                                    </a>
                                </li>

                            </ul>

                        </div>
                    </li>

                    <!-- 第九个列表 -->
                    <li>
                        <a href="#">
                            <span>数码配件</span>
                            <img class="banner-nav-right" src="img/right.png" alt="">
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/手机配件.webp" alt="">
                                        <div class="title">手机配件</div>
                                    </a>
                                <li>
                                    <a href="#">
                                        <img src="img/手机配件.webp" alt="">
                                        <div class="title">手机配件</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/手机配件.webp" alt="">
                                        <div class="title">手机配件</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/手机配件.webp" alt="">
                                        <div class="title">手机配件</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/手机配件.webp" alt="">
                                        <div class="title">手机配件</div>
                                    </a>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/手机配件.webp" alt="">
                                        <div class="title">手机配件</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/手机配件.webp" alt="">
                                        <div class="title">手机配件</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/手机配件.webp" alt="">
                                        <div class="title">手机配件</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/手机配件.webp" alt="">
                                        <div class="title">手机配件</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/手机配件.webp" alt="">
                                        <div class="title">手机配件</div>
                                    </a>
                                </li>

                            </ul>

                        </div>
                    </li>

                    <!-- 第十个列表 -->
                    <li>
                        <a href="#">
                            <span>增值服务</span>
                            <img class="banner-nav-right" src="img/right.png" alt="">
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/花币卡.png" alt="">
                                        <div class="title">花币卡</div>
                                    </a>
                                <li>
                                    <a href="#">
                                        <img src="img/花币卡.png" alt="">
                                        <div class="title">花币卡</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/花币卡.png" alt="">
                                        <div class="title">花币卡</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/花币卡.png" alt="">
                                        <div class="title">花币卡</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/花币卡.png" alt="">
                                        <div class="title">花币卡</div>
                                    </a>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/花币卡.png" alt="">
                                        <div class="title">花币卡</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/花币卡.png" alt="">
                                        <div class="title">花币卡</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/花币卡.png" alt="">
                                        <div class="title">花币卡</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/花币卡.png" alt="">
                                        <div class="title">花币卡</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/花币卡.png" alt="">
                                        <div class="title">花币卡</div>
                                    </a>
                                </li>

                            </ul>

                        </div>
                    </li>
                    <!-- 第十一个列表 -->
                    <li>
                        <a href="#">
                            <span>商用终端</span>
                            <img class="banner-nav-right" src="img/right.png" alt="">
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/商用显示器.webp" alt="">
                                        <div class="title">商用显示器</div>
                                    </a>
                                <li>
                                    <a href="#">
                                        <img src="img/商用显示器.webp" alt="">
                                        <div class="title">商用显示器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/商用显示器.webp" alt="">
                                        <div class="title">商用显示器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/商用显示器.webp" alt="">
                                        <div class="title">商用显示器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/商用显示器.webp" alt="">
                                        <div class="title">商用显示器</div>
                                    </a>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/商用显示器.webp" alt="">
                                        <div class="title">商用显示器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/商用显示器.webp" alt="">
                                        <div class="title">商用显示器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/商用显示器.webp" alt="">
                                        <div class="title">商用显示器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/商用显示器.webp" alt="">
                                        <div class="title">商用显示器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/商用显示器.webp" alt="">
                                        <div class="title">商用显示器</div>
                                    </a>
                                </li>

                            </ul>

                        </div>
                    </li>
                    
                    <!-- 第十二个列表 -->
                    <li>
                        <a href="#">
                            <span>生态周边</span>
                            <img class="banner-nav-right" src="img/right.png" alt="">
                        </a>
                        <!-- 滑动时出现的模块 -->
                        <div class="sub-cate">
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/家用电器.png" alt="">
                                        <div class="title">家用电器</div>
                                    </a>
                                <li>
                                    <a href="#">
                                        <img src="img/家用电器.png" alt="">
                                        <div class="title">家用电器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/家用电器.png" alt="">
                                        <div class="title">家用电器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/家用电器.png" alt="">
                                        <div class="title">家用电器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/家用电器.png" alt="">
                                        <div class="title">家用电器</div>
                                    </a>
                                </li>
                            </ul>

                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="img/家用电器.png" alt="">
                                        <div class="title">家用电器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/家用电器.png" alt="">
                                        <div class="title">家用电器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/家用电器.png" alt="">
                                        <div class="title">家用电器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/家用电器.png" alt="">
                                        <div class="title">家用电器</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/家用电器.png" alt="">
                                        <div class="title">家用电器</div>
                                    </a>
                                </li>

                            </ul>

                        </div>
                    </li>

                </ul>
            </div>


            <!-- 左侧小引导栏 -->
            <!-- <div class="banner-nav">
                <a href="#">
                    <span>手机</span>
                    <img src="img/right.png" alt="">
                </a>

                <a href="#">
                    <span>穿戴</span>
                    <img src="img/right.png" alt="">
                </a>

                <a href="#">
                    <span>平板</span>
                    <img src="img/right.png" alt="">
                </a>

                <a href="#">
                    <span>电脑</span>
                    <img src="img/right.png" alt="">
                </a>

                <a href="#">
                    <span>耳机音响</span>
                    <img src="img/right.png" alt="">
                </a>

                <a href="#">
                    <span>智慧屏</span>
                    <img src="img/right.png" alt="">
                </a>

                <a href="#">
                    <span>智能家居</span>
                    <img src="img/right.png" alt="">
                </a>

                <a href="#">
                    <span>鸿蒙智行</span>
                    <img src="img/right.png" alt="">
                </a>

                <a href="#">
                    <span>数码配件</span>
                    <img src="img/right.png" alt="">
                </a>

                <a href="#">
                    <span>增值服务</span>
                    <img src="img/right.png" alt="">
                </a>

                <a href="#">
                    <span>商用终端</span>
                    <img src="img/right.png" alt="">
                </a>

                <a href="#">
                    <span>生态周边</span>
                    <img src="img/right.png" alt="">
                </a>
            </div> -->


        </div>

        <!-- 快速导航 -->
        <div class="home-nav">

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智慧办公</p>
            </a>

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智能办公</p>
            </a>

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智能办公</p>
            </a>

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智慧办公</p>
            </a>

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智慧办公</p>
            </a>

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智慧办公</p>
            </a>

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智慧办公</p>
            </a>

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智慧办公</p>
            </a>

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智慧办公</p>
            </a>

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智慧办公</p>
            </a>

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智慧办公</p>
            </a>

            <a href="#">
                <img src="img/一体机.webp" alt="">
                <p>智慧办公</p>
            </a>

        </div>

    
        <!-- 新人专区 -->
        <div class="index-new">
            <div class="container">
                <a href="newcomer.html">
                    <img src="img/新人专区.png" alt="">
                </a>
            </div>
        </div>

        <!-- 商品部分   甄选-->
        <!-- 最外外面的大盒子 -->
        <div class="product">
            <!-- 标题盒子 -->
            <div class="product-title">
                <h3>甄选推荐</h3>
            </div>
            <!-- 商品中的大盒子 -->
            <div class="product-box">
                <!-- 商品盒子 -->
                <div class="pb-list">
                    <a href="#">
                        <img src="img/甄选.png" alt="">
                        <h4>HUAWEI Pura 70</h4>
                        <p>超高速风驰闪拍|第二代昆仑玻璃</p>
                        <b>￥4999起</b>
                    </a>
                </div>
                <div class="pb-list">
                    <a href="#">
                        <img src="img/甄选.png" alt="">
                        <h4>HUAWEI Pura 70</h4>
                        <p>超高速风驰闪拍|第二代昆仑玻璃</p>
                        <b>￥4999起</b>
                    </a>
                </div>
                <div class="pb-list">
                    <a href="#">
                        <img src="img/甄选.png" alt="">
                        <h4>HUAWEI Pura 70</h4>
                        <p>超高速风驰闪拍|第二代昆仑玻璃</p>
                        <b>￥4999起</b>
                    </a>
                </div>
                <div class="pb-list">
                    <a href="#">
                        <img src="img/甄选.png" alt="">
                        <h4>HUAWEI Pura 70</h4>
                        <p>超高速风驰闪拍|第二代昆仑玻璃</p>
                        <b>￥4999起</b>
                    </a>
                </div>
            </div>
        </div>

        
        <!-- 商品部分   电脑专区-->
        <!-- 最外外面的大盒子 -->
        <div class="productB">
            <!-- 标题盒子 -->
            <div class="productB-title">
                <h3>电脑专区</h3>
            </div>
            <!-- 商品中的大盒子 -->
            <div class="productB-box">
                <!-- 商品盒子 -->
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/电脑专区.webp" alt="">
                        <h4>华为擎云 S520 Gen2</h4>
                        <p>商务设计|强悍性能|智慧会议</p>
                        <b>￥4199</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/电脑专区.webp" alt="">
                        <h4>华为擎云 S520 Gen2</h4>
                        <p>商务设计|强悍性能|智慧会议</p>
                        <b>￥4199</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/电脑专区.webp" alt="">
                        <h4>华为擎云 S520 Gen2</h4>
                        <p>商务设计|强悍性能|智慧会议</p>
                        <b>￥4199</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/电脑专区.webp" alt="">
                        <h4>华为擎云 S520 Gen2</h4>
                        <p>商务设计|强悍性能|智慧会议</p>
                        <b>￥4199</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/电脑专区.webp" alt="">
                        <h4>华为擎云 S520 Gen2</h4>
                        <p>商务设计|强悍性能|智慧会议</p>
                        <b>￥4199</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/电脑专区.webp" alt="">
                        <h4>华为擎云 S520 Gen2</h4>
                        <p>商务设计|强悍性能|智慧会议</p>
                        <b>￥4199</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/电脑专区.webp" alt="">
                        <h4>华为擎云 S520 Gen2</h4>
                        <p>商务设计|强悍性能|智慧会议</p>
                        <b>￥4199</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/电脑专区.webp" alt="">
                        <h4>华为擎云 S520 Gen2</h4>
                        <p>商务设计|强悍性能|智慧会议</p>
                        <b>￥4199</b>
                    </a>
                </div>
            </div>
        </div>


        <!-- 商品部分   电脑专区-->
        <!-- 最外外面的大盒子 -->
        <div class="productB">
            <!-- 标题盒子 -->
            <div class="productB-title">
                <h3>穿戴专区</h3>
            </div>
            <!-- 商品中的大盒子 -->
            <div class="productB-box">
                <!-- 商品盒子 -->
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/穿戴专区.webp" alt="">
                        <h4>WATCH GT 5</h4>
                        <p>玄玑感知系统|全新跑骑体验</p>
                        <b>￥1588</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/穿戴专区.webp" alt="">
                        <h4>WATCH GT 5</h4>
                        <p>玄玑感知系统|全新跑骑体验</p>
                        <b>￥1588</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/穿戴专区.webp" alt="">
                        <h4>WATCH GT 5</h4>
                        <p>玄玑感知系统|全新跑骑体验</p>
                        <b>￥1588</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/穿戴专区.webp" alt="">
                        <h4>WATCH GT 5</h4>
                        <p>玄玑感知系统|全新跑骑体验</p>
                        <b>￥1588</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/穿戴专区.webp" alt="">
                        <h4>WATCH GT 5</h4>
                        <p>玄玑感知系统|全新跑骑体验</p>
                        <b>￥1588</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/穿戴专区.webp" alt="">
                        <h4>WATCH GT 5</h4>
                        <p>玄玑感知系统|全新跑骑体验</p>
                        <b>￥1588</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/穿戴专区.webp" alt="">
                        <h4>WATCH GT 5</h4>
                        <p>玄玑感知系统|全新跑骑体验</p>
                        <b>￥1588</b>
                    </a>
                </div>
                <div class="pb-list-B">
                    <a href="#">
                        <img src="img/穿戴专区.webp" alt="">
                        <h4>WATCH GT 5</h4>
                        <p>玄玑感知系统|全新跑骑体验</p>
                        <b>￥1588</b>
                    </a>
                </div>

            </div>
        </div>
    </main>
    
    <!-- 返回顶部 -->
    <div id="toTop">
        <div class="toTop-smallbox">
            <div class="toTop-top">
                <span class="iconfont icon-tubiao_fanhuidingbu"></span>
            </div class="toTop-bottom">
                返回顶部
            </div>
        </div>
    </div>

    <!-- 页面尾部开始 -->
    <footer>
        <div class="footer">
            <div class="container">
                <!-- 第一块 -->
                <div class="footer-server">
                    <ul>
                        <li>
                            <a href="">
                                <img src="img/footer-1.svg" alt="">
                                百强企业 品质保证
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/footer-2.svg" alt="">
                                7天退货 15天换货
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/footer-3.svg" alt="">
                                48元起免运费
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/footer-4.svg" alt="">
                                官方售后 全国联保
                            </a>
                        </li>
                    </ul>
                </div>
    
                <!-- 第二块 -->
                <div class="footer-links">
                    <!-- 左侧文字 -->
                    <ul>
                        <li>购买指南</li>
                        <li><a href="#">享0分期利息</a></li>
                        <li><a href="#">以旧换新</a></li>
                        <li><a href="#">众测活动</a></li>
                        <li><a href="#">企业购</a></li>
                        <li><a href="#">O2O采购</a></li>
                        <li><a href="#">教育优惠</a></li>
                    </ul>
                    <ul>
                        <li>售后服务</li>
                        <li><a href="#">门店装修</a></li>
                        <li><a href="#">保修政策</a></li>
                        <li><a href="#">防伪查询</a></li>
                        <li><a href="#">退换货政策</a></li>
                        <li><a href="#">手机寄修服务</a></li>
                    </ul>
                    <ul>
                        <li>服务支持</li>
                        <li><a href="#">服务店查询</a></li>
                        <li><a href="#">装修备件价格</a></li>
                        <li><a href="#">维修服务</a></li>
                        <li><a href="#">上门安装</a></li>
                        <li><a href="#">问题排查</a></li>
                    </ul>
                    <ul>
                        <li>特色服务</li>
                        <li><a href="#">防伪查询</a></li>
                        <li><a href="#">补购保障</a></li>
                        <li><a href="#">以旧换新</a></li>
                    </ul>
                    <ul>
                        <li>关于我们</li>
                        <li><a href="#">公司介绍</a></li>
                        <li><a href="#">华为零售店</a></li>
                        <li><a href="#">商家中心</a></li>
                        <li><a href="#">意见反馈</a></li>
                        <li><a href="#">规则中心</a></li>
                    </ul>
                    <ul>
                        <li>友情链接</li>
                        <li><a href="#">华为集团</a></li>
                        <li><a href="#">华为消费者业务</a></li>
                        <li><a href="#">华为云</a></li>
                        <li><a href="#">华为应用市场</a></li>
                        <li><a href="#">华为心声社区</a></li>
                    </ul>
                    <!-- 右侧图文   联系 -->
                    <div class="contact">
                        <p class="tel">950805</p>
                        <p class="time">7 x 24 小时客服热线 (仅收市话费)</p>
                        <div class="Rounded-corners">
                            <a href="#">
                                <i class="iconfont icon-rengongkefu">在线客服</i>
                                
                            </a>
                        </div>
                        <div class="concern-VMALL">
                            <p class="concern">
                            关注VMALL:&nbsp;
                            <a href="#">
                                <i class="iconfont icon-weixin">&nbsp;</i>
                                <img class="wx-img" src="img/客服二维码.webp" alt="">
                            </a>
                            <a href="#">
                                <i class="iconfont icon-toutiao">&nbsp;</i>
                            </a>
                            <a href="#">
                                <i class="iconfont icon-weibo">&nbsp;</i>
                            </a>
                            <a href="#">
                                <i class="iconfont icon-baidu"></i>
                            </a>
                            </p>
                            
                        </div>
                    </div>
                </div>
                
                <!-- 第三块 -->
                <div class="footer-info">
                    <div class="info">
                        <img src="img/logo_app.png" alt="">
                        <div class="info-fl">
                            <!-- 第一块 黑色字 -->
                            <p>
                                <a href="#">
                                    <span>华为集团</span>
                                </a>
    
                                <a href="#">
                                    <span>消费者业务网站</span>
                                </a>
    
                                <a href="#">
                                    <span>华为应用市场</span>
                                </a>
                                <a href="#">
                                    <span>HarmonyOS</span>
                                </a>
                                <a href="#">
                                    <span>华为终端云空间</span>
                                </a>
                                <a href="#">
                                    <span>开发者联盟</span>
                                </a>
                                <a href="#">
                                    <span>华为商城手机版</span>
                                </a>
                            </p>
                            <!-- 第二块 灰色文字 -->
                            <p>
                                <a href="#">
                                    <span>隐私声明</span>
                                </a>
    
                                <a href="#">
                                    <span>服务协议</span>
                                </a>
    
                                <a href="#">
                                    <span>COOKIES</span>
                                </a>
    
                                Copyright © 2012-2024 华为终端有限公司 版权所有
                                
                                <a href="#">
                                    <span>经营资质</span>
                                </a>
    
                                <a href="#">
                                    <span>粤ICP备19015064号</span>
                                </a>
    
                                <a href="#">
                                    <span>粤公网安备 44190002003939号</span>
                                </a>
                                <br>
    
                                <a href="#">
                                    <span>增值电信业务经营许可证：粤B2-20190762</span>
                                </a>
                                <a href="#">
                                    <span>备案主体编号：44201919072182</span>
                                </a>
                                <a href="#">
                                    <span>粤新出网备（2021）2号</span>
                                </a>
                                <a href="#">
                                    <span>（粤）网械平台备字[2022]第00005号</span>
                                </a>
                                <br>
    
                                <a href="#">
                                    <span>互联网药品信息服务资格证（粤）-非经营性-2020-0102</span>
                                </a>
                                <a href="#">
                                    <span>广东省网络食品交易第三方平台备案：GDWS10168</span>
                                </a>
                                <a href="#">
                                    <span>APP备案号: 粤ICP备19015064号-39A号</span>
                                </a>
                                <br>
    
                                <a href="#">
                                    <span>网信算备441901536982702230011号</span>
                                </a>
                                <a href="#">
                                    <span>网信算备441901536982704230013号</span>
                                </a>
                                <br>
                            </p>
    
    
                        </div>
                        <div class="img-right">
                            <a href="#">
                                <img src="img/电子营业执照.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
    
            </div>
        </div>
    </footer>
    

    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/main.js"></script>
    
</body>
</html>